<!DOCTYPE html>
<html lang="en">
<head>
    <title>更换手机号</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        td {
            height: 30px;
        }

        .td-right {
            width: 22%;
        }

        .td-left {
            width: 28%;
        }

        body {
            background-color: #efefef;
        }

        table, table tr th, table tr td {
            border: 1px solid rgba(68, 67, 72, 0.57);
        }

        table {
            margin-top: 16px;
            margin-bottom: 8px;
            margin-left: auto;
            margin-right: auto;
            width: 100%;
        }

        h2 {
            margin: auto;
            padding: 5px 5px;
            background-color: #cecfce;
        }

        input {
            padding: 3px 3px;
            margin: 6px 6px;
        }

        easyui-combobox {
            height: 24px;
        }

        .td-right {
            text-align: right;
            background-color: #f7f3f7;
        }

        .td-left {
            text-align: left;
            background-color: #ffffff;
        }

        body {
            min-width: 850px;
        }

        .container {
            width: 849px;
            margin: auto;
        }
        span.content {
            margin-left: 10px;
            font-size: 14px;
        }
        #submit {
            background-color: rgba(51, 153, 255, 1);
            width: 300px;
            height: 26px;
            display: block;
            margin: 5px auto;
            border-radius: 5px;
            cursor: pointer;
            line-height: 26px;
            text-decoration: none;
            color: white;
            text-align: center;
            font-size: 12px;
        }
        #messageBox {
            padding: 0px 15px;
            min-width: 150px;
            height: 50px;
            background-color: #ddd;
            border-radius: 10px;
            line-height: 50px;
            border: #999 solid 1px;
            position: absolute;
            left: 40%;
            top: -70px;
            opacity: 0.8;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <form id="usersDataForm" method="post" novalidate>
        <table style="border-collapse: collapse;">
            <tr>
                <td colspan="4">
                    <h2>车辆信息</h2>
                </td>
            </tr>
            <tr>
                <td class="td-right">
                    <span>品牌：</span>
                </td>
                <td class="td-left">
                    <span class="content" id="vtypeBrand"></span>
                </td>
                <td class="td-right">
                    <span>配置：</span>
                </td>
                <td class="td-left">
                    <span class="content" id="vtypeConfig"></span>
                </td>
            </tr>
            <tr>
                <td class="td-right">
                    <span>车架号：</span>
                </td>
                <td class="td-left">
                    <span class="content" id="vin"></span>
                </td>
                <td class="td-right">
                    <span>发动机号：</span>
                </td>
                <td class="td-left">
                    <span class="content" id="engineno"></span>
                </td>
            </tr>
            <tr>

                <td class="td-right">
                    <span>颜色：</span>
                </td>
                <td class="td-left">
                    <span class="content" id="color"></span>
                </td>
                <td class="td-right">
                    <span>T服务状态：</span>
                </td>
                <td class="td-left">
                    <span class="content" id="tsstate"></span>
                    <input type="button" id="refreshTStatus" onclick="getVehicleInfo1()" value="重试" />
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <h2>使用人信息</h2>
                </td>
            </tr>
            <tr>
                <td class="span-width tdHeight td-right">
                    <span>姓名：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="name"></span>
                </td>
                <td class="span-width tdHeight td-right">
                    <span>证件号码：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="idcardNo"></span>
                </td>
            </tr>
            <tr>
                <td class="span-width tdHeight td-right">
                    <span style="color: red">*</span><span>车联网使用人手机号：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <input id="phone" name="phone" autocomplete="off"/>
                </td>
                <td class="span-width tdHeight td-right">
                    <input type="button" id="sendSmsBtn" onclick="codeMessage('01')"
                            style="width: 165px"
                            value="点击获取验证码" />
                </td>
                <td class="input-td-width tdHeight td-left">
                    <input id="CODE" name="CODE"
                           style="width:50px;"
                           class="easyui-validatebox content-width" type="text"
                           data-options="required:true"
                           placeholder="验证码"
                           autocomplete="off"/>
                    <div style="display:inline-block;color:grey;font-size: 13px">验证码有效时间为5分钟</div>
                </td>
            </tr>
            <tr>
                <td class="span-width tdHeight td-right">
                    <span style="color: red">*</span><span>紧急联系人手机号：</span>
                </td>
                <td class="input-td-width tdHeight td-left" colspan="3">
                    <input id="secContPhone" name="secContPhone" autocomplete="off"/>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <h2>详情</h2>
                </td>
            </tr>
            <tr>
                <td class="span-width tdHeight td-right">
                    <span>购车日期：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="purchaseDate"></span>
                </td>
                <td class="span-width tdHeight td-right">
                    <span>集成电路识别码(ICCID)：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="iccid"></span>
                </td>
            </tr>
            <tr id="beforePackage">
                <td class="span-width tdHeight td-right">
                    <span>App是否注册：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="ddd"></span>
                </td>
                <td class="span-width tdHeight td-right">
                    <span>SIM卡状态：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="state" style="padding-left:9px;"></span>
                    <input type="button" id="refreshSimStatus" onclick="getVehicleInfo()" value="刷新" />
                </td>
            </tr>
            <tr>
                <td class="span-width tdHeight td-right">
                    <span>最后一次数据上报时间：</span>
                </td>
                <td class="input-td-width tdHeight td-left">
                    <span class="content" id="lastTime"></span>
                </td>
                <td class="span-width tdHeight td-right"></td>
                <td class="input-td-width tdHeight td-left"></td>
            </tr>
            <tr>
                <td class="span-width tdHeight td-left" colspan="4">
                    <a id ="submit" href="javascript:void(0)" class="button button-rounded button-flat-primary" onclick="submit();">提 交</a>
                </td>
            </tr>
        </table>
        <span style="font-size: 12px; color: red">仅限手机号错误，更换车主请联系车联网服务中心400-666-6677</span>
    </form>
    <div id="messageBox"></div>
</div>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="md5.js"></script>
    <script type="text/javascript" src="url.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            $('#phone').val('')
            $('#CODE').val('')
            $('#secContPhone').val('')
        }
        jQuery.support.cors = true; // IE9兼容ajax跨域
        var paramsStr = window.location.search
        var baseUrl = url || 'http://yuntest.gwm.com.cn:86' //'http://tsp_sub.gwm.com.cn' //
        var params = {
            vin: paramsStr.split('vin=')[1] ? paramsStr.split('vin=')[1].split('&')[0] : '',
            dealerNum: paramsStr.split('dealerNum=')[1] ? paramsStr.split('dealerNum=')[1].split('&')[0] : '',
            account: paramsStr.split('account=')[1] ? paramsStr.split('account=')[1].split('&')[0] : '',
            token: paramsStr.split('token=')[1] ? paramsStr.split('token=')[1].split('&')[0] : ''
        }
        var token2 = md5(params.dealerNum + decodeURI(params.account) + new Date().getFullYear() + addZero((new Date().getMonth() + 1).toString()) + addZero(new Date().getDate().toString()))
        var codeClock = 0
        var userId = ''
        var name = ''
        var tsstate = ''

        // 校验参数token是否正确MD5加密，格式 130620管理员20190716
        if (token2.toUpperCase() !== params.token) {
            window.location.href = 'error.html'
        } else {
            var colorObj = {}
            var tsstateObj = {}
            var stateObj = {}
            getAllInfo()
        }

        // 获取与车辆有关信息
        function getAllInfo () {
            // 获取车辆颜色列表
            $.ajax({
                async: false,
                type: 'GET',
                contentType: "application/json;charset=utf-8",
                url: baseUrl + '/boss/openapi/basedata/getCodeList?codeKind=Veh_Color',
                data: {
                    dealerNum: params.dealerNum,
                    account: params.account,
                    token: params.token
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code === 200) {
                        colorObj = data.data
                    }
                },
                error: function (e) {
                    requestError(e)
                }
            })
            // 获取T服务状态列表
            $.ajax({
                async: false,
                type: 'GET',
                contentType: "application/json;charset=utf-8",
                url: baseUrl + '/boss/openapi/basedata/getCodeList?codeKind=Code_tsState',
                data: {
                    dealerNum: params.dealerNum,
                    account: params.account,
                    token: params.token
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code === 200) {
                        tsstateObj = data.data
                    }
                },
                error: function (e) {
                    requestError(e)
                }
            })
            // 获取SIM卡状态列表
            $.ajax({
                async: false,
                type: 'GET',
                contentType: "application/json;charset=utf-8",
                url: baseUrl + '/boss/openapi/basedata/getCodeList?codeKind=Code_simStatus',
                data: {
                    dealerNum: params.dealerNum,
                    account: params.account,
                    token: params.token
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code === 200) {
                        stateObj = data.data
                    }
                },
                error: function (e) {
                    requestError(e)
                }
            })
            // 根据vin号获取用户信息
            $.ajax({
                async: false,
                type: 'GET',
                contentType: "application/json;charset=utf-8",
                url: baseUrl + '/boss/openapi/owner/getOwnerByVin',
                data: {
                    vin: params.vin,
                    dealerNum: params.dealerNum,
                    account: params.account,
                    token: params.token
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code === 200 && data.data) {
                        for (key in data.data) {
                            $('#' + key).html(data.data[key])
                        }
                        $('#secContPhone').val(data.data.secContPhone)
                        $('#phone').val(data.data.phone)
                        userId = data.data.keyid
                        name = data.data.name
                    }
                },
                error: function (e) {
                    requestError(e)
                }
            })
            // 根据vin号获取套餐列表
            $.ajax({
                async: false,
                type: 'GET',
                contentType: "application/json;charset=utf-8",
                url: baseUrl + '/boss/openapi/vehicle/getServicepackByVin',
                data: {
                    vin: params.vin,
                    dealerNum: params.dealerNum,
                    account: params.account,
                    token: params.token
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code === 200) {
                        if (data.data && data.data.length > 0) {
                            for (var i=0;i<data.data.length;i++) {
                                if (data.data[i].displayName) {
                                    $('#beforePackage').after(
                                        '<tr><td class="span-width tdHeight td-right"><span>' + data.data[i].displayName + '（' + data.data[i].packName + '）' + '套餐开通时间：</span></td>'
                                        + '<td class="input-td-width tdHeight td-left"><span class="content">' + dateToString(data.data[i].startTime) + '</span></td>'
                                        + '<td class="span-width tdHeight td-right"><span>' + data.data[i].displayName + '（' + data.data[i].packName + '）' + '套餐结束时间：</span></td>'
                                        + '<td class="input-td-width tdHeight td-left"><span class="content">' + dateToString(data.data[i].expirationTime) + '</span></td></tr>'
                                    )
                                } else {
                                    $('#beforePackage').after(
                                        '<tr><td class="span-width tdHeight td-right"><span>' + data.data[i].packName + '套餐开通时间：</span></td>'
                                        + '<td class="input-td-width tdHeight td-left"><span class="content">' + dateToString(data.data[i].startTime) + '</span></td>'
                                        + '<td class="span-width tdHeight td-right"><span>' + data.data[i].packName + '套餐结束时间：</span></td>'
                                        + '<td class="input-td-width tdHeight td-left"><span class="content">' + dateToString(data.data[i].expirationTime) + '</span></td></tr>'
                                    )
                                }
                            }
                        }
                    }
                },
                error: function (e) {
                    requestError(e)
                }
            })
            // 根据vin查询车辆最后一次车况数据
            $.ajax({
                async: false,
                type: 'GET',
                contentType: "application/json;charset=utf-8",
                url: baseUrl + '/boss/openapi/vehicle/lastVehicleCondition',
                data: {
                    vin: params.vin,
                    dealerNum: params.dealerNum,
                    account: params.account,
                    token: params.token
                },
                dataType: 'json',
                success: function (data) {
                    if (data && data.data) {
                        var stamp = data.data.editTime
                        var timeStr = stamp.split('.')[0];
                        $('#lastTime').html(timeStr)
                    }
                },
                error: function (e) {
                    requestError(e)
                }
            })
            getVehicleInfo()
        }
        // 根据vin号获取车辆信息
        function getVehicleInfo () {
            $('#state').html('') // 为了SIM卡状态有刷新的感觉
            $.ajax({
                async: true,
                type: 'GET',
                contentType: "application/json;charset=utf-8",
                url: baseUrl + '/boss/openapi/vehicle/getVehicleAllInfoByVin',
                data: {
                    vin: params.vin,
                    dealerNum: params.dealerNum,
                    account: params.account,
                    token: params.token
                },
                dataType: 'json',
                success: function (data) {
                    if (data.code === 200 && data.data) {
                        if (data.data.vehicleDto) {
                            $('#vtypeBrand').html(data.data.vehicleDto.vtypeBrand)
                            $('#vtypeConfig').html(data.data.vehicleDto.vtypeConfig)
                            $('#vin').html(data.data.vehicleDto.vin)
                            $('#engineno').html(data.data.vehicleDto.engineno)
                            $('#color').html(colorObj[data.data.vehicleDto.color])
                            $('#purchaseDate').html(dateToString(data.data.vehicleDto.purchaseDate))
                        }
                        if (data.data.serviceNoPwdDto) {
                            $('#tsstate').html(tsstateObj[data.data.serviceNoPwdDto.tsstate])
                            tsstate = data.data.serviceNoPwdDto.tsstate
                        }
                        if (data.data.simDto) {
                            $('#iccid').html(data.data.simDto.iccid)
                            $('#state').html(stateObj[data.data.simDto.state])
                        }
                    }
                },
                error: function (e) {
                    requestError(e)
                }
            })
        }
        function getVehicleInfo1 () {
            $('#tsstate').html('')
            tsstate = ''
            getVehicleInfo()
        }
        // 发送和校验验证码短信
        function codeMessage (type, code) {
            if (tsstate !== '2' && tsstate !== '4') {
                showMessage('只有激活状态和已过期状态的车辆可以更换手机号')
                return
            }
            if (codeClock > 0 && type === '01') {
                return
            }
            var phone = $('#phone').val()
            if (!phone.match(/^1[3456789]\d{9}$/)) {
                showMessage('输入手机号有误')
                return
            }
            $.ajax({
                async: true,
                type: 'GET',
                contentType: "application/json;charset=utf-8",
                url: baseUrl + '/boss/openapi/tsp/request4Tsp',
                data: {
                    phone:$('#phone').val(),
                    code: code || '0',
                    requestType: type,
                    dealerNum: params.dealerNum,
                    account: params.account,
                    token: params.token
                },
                dataType: 'json',
                success: function (data) {
                    if (data.data.result === 'success') {
                        if (type === '01') {
                            showMessage('验证码发送成功')
                            countSecond()
                        } else {
                            if (userId === '') {
                                showMessage('未查询到车主信息')
                            } else {
                                $.ajax({
                                    async: false,
                                    type: 'POST',
                                    contentType: "application/json;charset=utf-8",
                                    url: baseUrl + '/boss/openapi/owner/openapi/updateMobile?' + 'dealerNum=' + params.dealerNum + '&account=' + params.account + '&token=' + params.token,
                                    data: JSON.stringify({
                                        keyid: userId,
                                        name: name,
                                        phone: $('#phone').val(),
                                        secContPhone: $('#secContPhone').val()
                                    }),
                                    dataType: 'json',
                                    success: function (data) {
                                        if (data && data.code === 200) {
                                            showMessage('手机号修改成功')
                                        } else {
                                            showMessage('手机号修改失败')
                                        }
                                    },
                                    error: function (e) {
                                        showMessage(e.responseJSON.message)
                                    }
                                })
                            }
                        }
                    } else {
                        if (type === '01') {
                            showMessage('验证码发送失败')
                            countSecond()
                        } else {
                            showMessage('验证码不正确')
                        }
                    }
                },
                error: function (e) {
                    if (type === '01') {
                        showMessage('验证码发送失败')
                        countSecond()
                    } else {
                        showMessage('验证码不正确')
                        countSecond()
                    }
                    requestError(e)
                }
            })
        }
        /**
        * 更换手机号
        */
        function submit() {
            if (!$('#phone').val().match(/^1[3456789]\d{9}$/)) {
                showMessage('输入手机号有误')
                return
            }
            if (!$('#secContPhone').val().match(/^1[3456789]\d{9}$/)) {
                showMessage('紧急联系人手机号有误')
                return
            }
            codeMessage('02', $('#CODE').val())
        }
        // 请求报错
        function requestError (e) {
            console.log(e)
        }
        // 时间戳转字符串
        function dateToString (stamp) {
            if (stamp) {
                var date = new Date(stamp)
                return date.getFullYear() + '-' + addZero((date.getMonth() + 1).toString()) + '-' + addZero(date.getDate().toString())
            } else {
                return ''
            }
        }
        // 提示信息
        function showMessage (content) {
            if($('#messageBox').css('top') === '-70px') {
                $('#messageBox').html(content)
                $('#messageBox').animate({top: '70px'})
                setTimeout(function () {
                    $('#messageBox').animate({top: '-70px'})
                }, 4000)
            }
        }
        // 发送验证码倒计时
        function countSecond () {
            codeClock = 30
            $('#sendSmsBtn').val('点击获取验证码（' + codeClock + '）')
            var tInterval = setInterval(function () {
                if (codeClock > 0) {
                    codeClock--
                    $('#sendSmsBtn').val('点击获取验证码（' + codeClock + '）')
                } else {
                    $('#sendSmsBtn').val('点击获取验证码')
                    clearInterval(tInterval)
                }
            }, 1000)
        }
        // 月份日期补零
        function addZero (val) {
            return val.length === 1 ? '0' + val : val
        }

    </script>

</body>
</html>
